<template>

    <div class="search-container">
        <p class="textitem flex-start" style="font-size: 18px; margin-bottom: 16px;">
            服务包详情
        </p>
    </div>

    <el-card style="height: 300px;background-color: #f2f7fb;">
        <div style="display: flex;">
            <div>
                <img :src="serviceData.image" alt="" class="packImg">
            </div>
            <div class="packDetails">
                <div class="packName">
                    <span>{{ serviceData?.name }}</span>
                    <el-tag type='warning' round style="font-size: 15px;margin-bottom: 5px;">
                        {{ serviceData.type }}
                    </el-tag>
                </div>
                <el-form-item label="订购定价：" style="color: red;">￥{{ serviceData.price }}</el-form-item>
                <el-form-item label="服务对象：">{{ serviceData.client }}</el-form-item>
                <el-form-item label="签约周期：">{{ serviceData.period }}({{ serviceData.renewalStatus === '1' ? '可续签' :
                    '不可续签' }})</el-form-item>
                <el-form-item label="服务介绍：">{{ serviceData.intro }}</el-form-item>
            </div>
        </div>
    </el-card>

    <!-- 服务项目 -->
    <div class="search-container">
        <p class="flex-start" style="font-size: 18px; margin-bottom: 16px; font-weight: bold;">
            服务项目
        </p>
    </div>

    <!-- 服务项目表格 -->
    <el-table :data="tableData.rows"
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'normal', color: '#606266' }" style="font-size: 14px;"
        border>
        <el-table-column label="项目编号" prop="_id" width="150" align="center">
            <template #default="scope">
                {{ scope.row._id || '2021340001' }}
            </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="name" width="200" align="center" />
        <el-table-column label="次数" prop="count" width="120" align="center">
            <template #default="scope">
                <span class="count-link">{{ scope.row.count || 2 }}次</span>
            </template>
        </el-table-column>
        <el-table-column label="项目类型" prop="type" width="150" align="center" />
        <el-table-column label="项目介绍" prop="intro" min-width="300">
            <template #default="scope">
                <span>{{ scope.row.intro || '1.血压测量及记录 2.根据结果提供相应合理健康指导' }}</span>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
        <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
            :page-sizes="[5, 10, 20, 50]" :total="tableData.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="findServiceItems" @current-change="findServiceItems" />
    </div>
    <!-- 操作按钮 -->
    <div class="action-buttons">
        <el-button type="primary" @click="handleEdit">编辑</el-button>
        <el-button type="danger" @click="handleDelete">停用</el-button>
        <el-button @click="handleBack">返回</el-button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findServiceItemsApi } from '@/api/service';
import { deleteservicePacksApi } from '@/api/servicepack';

// 路由实例
const route = useRoute()
const router = useRouter()

// 服务包数据
const serviceData = ref({
    _id: '',
    name: '基础健康管理服务包',
    type: '初级包',
    price: 1200,
    client: '老年人群',
    period: '1年',
    renewalStatus: '1',
    intro: '为老年人提供基础的健康管理服务，包括定期体检、健康咨询等。',
    image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
});

// 定义服务项目的类型
interface ServiceItem {
    _id: string;
    name: string;
    type: string;
    count: number;
    price: number;
    intro: string;
}

// 服务项目表格数据
const tableData = reactive<{ rows: ServiceItem[]; total: number }>({ rows: [], total: 0 });
const pageData = ref({
    currentPage: 1,
    pageSize: 200
});

onMounted(() => {
    loadServicePackDetail()
    findServiceItems()
});

// 加载服务包详情
async function loadServicePackDetail() {
    const id = route.params._id as string
    if (!id) {
        ElMessage.error('缺少服务包ID')
        return
    }
    serviceData.value._id = id
}

// 查询服务项目数据
async function findServiceItems() {
    const res = await findServiceItemsApi({
        currentPage: pageData.value.currentPage,
        pageSize: pageData.value.pageSize,
        // 可以根据需要添加筛选条件
        // type: '',
        // name: ''
    });

    console.log('服务项目API响应:', res);

    if (res.code === 200) {
        tableData.rows = res.data.rows || [];
        tableData.total = res.data.total || 0;
    } else {
        ElMessage.error(res.message || '获取服务项目失败');
    }
}

// 编辑服务包
function handleEdit() {
    router.push(`/data/servicePack/update/${serviceData.value._id}`)
}

// 删除服务包
async function handleDelete() {
    const isConfirm = await ElMessageBox.confirm(
        '服务包删除后无法恢复，确定要删除吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    if (isConfirm == 'confirm') {
        deleteservicePacks(serviceData.value._id);
    }

    // 这里应该调用删除API
    console.log('删除服务包:', serviceData.value._id)

}

// 删除服务包请求：
const deleteservicePacks = async (_id: string) => {
    const res = await deleteservicePacksApi({
        _id
    });
    if (res.code == 200) {
        ElMessage.success('删除成功')
        router.push('/data/servicePack/list')
    } else {
        ElMessage.error(res.message);
    }
}

// 返回列表
function handleBack() {
    router.push('/data/servicePack/list')
}
</script>

<style scoped>
.search-container {
    padding: 20px 0;
    background: #fff;
    border-radius: 4px;
}

.textitem {
    position: relative;
    padding-left: 20px;
}

.textitem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.packImg {
    width: 200px;
    height: 150px;
    margin-right: 20px;
    border-radius: 8px;
}

.packDetails {
    flex: 1;
    padding: 10px;
}

.packName {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    padding: 15px 0;
    border-bottom: 1px solid #F2F7FB;
    justify-content: flex-start;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.el-form-item {
    margin-bottom: 10px;
}

.el-form-item__label {
    font-weight: normal;
    color: #606266;
}

/* 表格样式 */
.el-table {
    border: 1px solid #ebeef5;
}

.el-table th {
    background-color: #f5f7fa !important;
    color: #606266 !important;
    font-weight: normal !important;
}

.el-table td {
    border-bottom: 1px solid #ebeef5;
}

/* 次数列的蓝色链接样式 */
.el-table .count-link {
    color: #409eff;
    cursor: pointer;
    text-decoration: none;
}

.el-table .count-link:hover {
    color: #66b1ff;
}
</style>
